.p4 {
  &.swiper-slide-active {
    .man {
      -webkit-animation: w 1.5s;
      -webkit-animation-delay: 1.5s;
      -webkit-animation-timing-function: ease-out;
      -webkit-animation-fill-mode: backwards;
    }
    .box {
      -webkit-animation: box 0.5s;
      -webkit-animation-delay: 2.5s;
      -webkit-animation-timing-function: ease-in;
      -webkit-animation-fill-mode: backwards;
    }
    .w-right {
      -webkit-animation: zoomIn 2s;
      -webkit-animation-delay: 3s;
      -webkit-animation-timing-function: linear;
      -webkit-animation-fill-mode: backwards;
    }
    .w-left {
      -webkit-animation: w 1s;
      -webkit-animation-delay: 5s;
      -webkit-animation-timing-function: linear;
      -webkit-animation-fill-mode: backwards;
    }
  }
  .man {
    position: absolute;
    width: 626px;
    height: 463px;
    left: 50%;
    margin-left: -313px;
    bottom: 0;
    background: url("../img/slide/p4/man@626x493.png") no-repeat 0 0;
    z-index: 13;
  }
  .box {
    position: absolute;
    width: 369px;
    height: 533px;
    left: 50%;
    margin-left: -176px;
    bottom: 50%;
    margin-bottom: -158px;
    background: url("../img/slide/p4/box@369x533.png") no-repeat 0 0;
    z-index: 11;
  }
  .w-right {
    position: absolute;
    width: 176px;
    height: 382px;
    left: 50%;
    margin-left: -27px;
    bottom: 50%;
    margin-bottom: 14px;
    background: url("../img/slide/p4/w_right@176x382.png") no-repeat 0 0;
    z-index: 12;
  }
  .w-left {
    position: absolute;
    width: 60px;
    height: 420px;
    left: 50%;
    margin-left: -127px;
    bottom: 50%;
    margin-bottom: -120px;
    background: url("../img/slide/p4/w_left@60x420.png") no-repeat 0 0;
    z-index: 12;
  }
}